{% extends 'layout/owner_basic.html' %}
{% load static %}
<title>订单页面</title>
{% block css %}
    <style>
    @font-face {
    font-family: 'MyFont';
    src: url("{% static "font/Font1.ttf" %}") format('truetype');
    }
    .container.mt-4{
        width: 80%;
    }
    .container h1 {
        font-family: 'MyFont', Arial, sans-serif;
        font-size: 40px;
        margin-bottom: 20px;
        color: hsl(30deg 82% 43%);
        text-align: center;
    }
    body{
        background-image: url('{% static 'pics/comments_background3.png' %}');
        background-color: #ffcc00;
        color: #361f0e;
        font-family: Arial, sans-serif;
        font-size: 16px;
        background-size:100% 100%; /* 使背景图片充满整个屏幕 */
        background-repeat: no-repeat; /* 防止背景图片重复 */
        background-attachment: fixed;
    }


    .table-container {
        margin-top: 30px;
        margin-bottom: 60px;
        background-color: #f5ebdc; /* 设置你想要的颜色 */
        border-radius: 15px;
        padding-top: 6px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .table {
        position: relative;
        border-collapse: separate;
        border-spacing: 0 10px;
        border-color: #f5ebdc;
        border-radius: 15px;

    }
    /* Style table headers */
    .table th {
        font-size: 18px;
        height:50px;
        background-color: #fafafa;
        text-align: left;
        padding: 12px;
        font-weight: bold;
    }

    /* Style table cells */
    .table td{
        font-size: 14px;
        padding: 12px;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid #ddd;
    }

    .table tbody tr td:first-child{
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    .table tbody tr td:last-child {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }
    .table thead tr th:first-child{
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    .table thead tr th:last-child {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }



    .table tbody tr {
        background-color: #fafafa;
        height: 80px; /* 根据需要调整间距大小 */
    }

    .table tbody tr:hover {
        background-color: #ffcc00; /* Change the background color on hover */
        transform: translateY(-4px); /* Lift the row more on hover */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Add a stronger shadow */
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; /* Smooth transition effect */
    }


    .table td:last-child {
        font-weight: bold;
    }

/* Style the "操作" buttons */
    .btn-success {
        background-color: #669933;
        color: #fff;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
    }

    .btn-primary {
        background-color: #006699;
        color: #fff;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
    }

/* Add some margin to the buttons */
    .btn-success, .btn-primary {
        margin-right: 10px;
    }

/* Hover effect on buttons */
    .btn-success:hover, .btn-primary:hover {
        opacity: 0.8;
    }
</style>
{% endblock %}

{% block content %}
  <div class="container mt-4">
  <div class="fixed-header">
    <h1>--------------- 订单信息 ---------------</h1>
  </div>
  <div class="table-container">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>订单ID</th>
          <th>点单内容</th>
          <th>总价</th>
          <th>备注</th>
          <th>下单人ID</th>
          <th>餐厅ID</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {% for order in info %}
          <tr>
            <td>{{ order.order_id }}</td>
            <td>{{ order.content }}</td>
            <td>{{ order.total }}</td>
            <td>{{ order.comment }}</td>
            <td>{{ order.guest_id }}</td>
            <td>{{ order.restaurant_id }}</td>
            <td>
              {% if order.status == 0 %}
                已下单
              {% elif order.status == 1 %}
                已接单
              {% elif order.status == 2 %}
                已完成
              {% endif %}
            </td>
            <td>
              {% if order.status == 0 %}
                <button class="btn btn-success " data-status="0">接单</button>
              {% elif order.status == 1 %}
                <button class="btn btn-primary" data-status="1">完成</button>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  </div>
{% endblock %}

{%block js %}
<script>
    $(document).ready(function() {
  // 处理接单按钮点击事件
  $('.btn-success').click(function() {
    var orderId = $(this).closest('tr').find('td:first').text(); // 获取订单ID
    updateOrderStatus(orderId, 1, this); // 调用更新订单状态的函数
  });

  // 处理完成按钮点击事件
  $('.btn-primary').click(function() {
    var orderId = $(this).closest('tr').find('td:first').text(); // 获取订单ID
    updateOrderStatus(orderId, 2, this); // 调用更新订单状态的函数
  });

  // 更新订单状态的函数
  function updateOrderStatus(orderId, newStatus, button) {
    $.ajax({
      url: '/owner/update_order_status', // 替换为实际的处理订单状态更新的Django视图的URL
      method: 'POST',
      data: {
        order_id: orderId,
        new_status: newStatus,
        csrfmiddlewaretoken: '{{ csrf_token }}'
      },
      success: function(response) {
        // 更新成功后，根据服务器响应来修改按钮和状态显示
        if (newStatus === 1) {
          $(button).text('完成').removeClass('btn-success').addClass('btn-primary'); // 更新按钮文字和类
        } else if (newStatus === 2) {
          $(button).hide(); // 隐藏按钮
        }

        // 更新订单状态显示
        var statusCell = $(button).closest('tr').find('td:last'); // 找到按钮所在行的最后一个<td>元素
        if (newStatus === 1) {
          statusCell.text('已接单');
        } else if (newStatus === 2) {
          statusCell.text('已完成');
        }
      },
      error: function(error) {
        console.error('订单状态更新失败', error);python
      }
    });
  }
});

</script>
{% endblock %}